<template>
    <div>

      <NoSearch v-show="articles.length == 0"></NoSearch>
      <div v-show="articles.length != 0">
              <!-- 有题图的情况 -->
              <el-card :body-style="{ padding: '0px' }" shadow="hover" v-for="(article,index) in articles" :key="index">
                <div style="padding-left: 14px;padding-top: 20px;padding-right: 20px" v-if="article.thematic != null">
                  <el-link :underline="false" @click.prevent="$router.push(`/articleDetails/` + article.id)"><span class="article-title" title="点击阅读全文">{{article.title}}</span></el-link>
                  <div class="bottom clearfix" style="margin-top: 10px">
                    <el-row>
                      <el-col :span="7">
                        <img v-if="article.thematic != null" :src="article.thematic" style="height: 100px;width: 80%;margin-bottom: 20px"/>
                      </el-col>
                      <el-col :span="17" style="margin-bottom: 20px">
                        <span style="margin-bottom: 20px" class="article-class">{{ article.overview }}</span>
                      </el-col>
                    </el-row>
                  </div>
                </div>

                <!-- 没有题图的情况 -->
                <div style="padding-left: 14px;padding-top: 20px;padding-right: 20px" v-if="article.thematic == null">
                  <el-link :underline="false" @click.prevent="$router.push(`/articleDetails/` + article.id)"><span class="article-title" title="点击阅读全文">{{article.title}}</span></el-link>
                  <div class="bottom clearfix" style="margin-top: 10px">
                    <el-row>
                      <el-col :span="24" style="margin-bottom: 20px">
                        <span style="margin-bottom: 20px" class="article-class">{{ article.overview }}</span>
                      </el-col>
                    </el-row>
                  </div>
                </div>
              </el-card>

      <!-- 分页插件 -->
      <el-row>
        <el-col :span="12" :offset="4">
          <div style="width: 100%;text-align: center">
            <el-pagination
              layout="prev, pager, next "
              :total="page.total"
              :page-size="page.size"
              :current-page="page.current"
              @current-change="findPage"
              background
              style="margin-top: 30px">
            </el-pagination>
          </div>
        </el-col>
      </el-row>
      </div>
    </div>
</template>

<script>
    import NoSearch from "./NoSearch";
    export default {
        name: "SearchArticle",
      components: {NoSearch},
      data() {
          return{
            searchName: '',
            articles: [],
            page:{
              total: 0,// 总记录数
              size: 5,// 每页显示条数，默认为5
              current: 1,// 当前页码
              pages: 0// 总页数
            },
          }
      },
      methods: {
          // 分页加载数据
          pageGetData(currentPage, pageSize) {
            this.$http.get("http://localhost:9999/siji/article/page/"+currentPage+"/"+pageSize+"?title=" + this.searchName, {
              headers: {
                token: window.localStorage.getItem("userToken")
              }
            }).then(resp => {
              this.articles = resp.data.data.records
              this.page.size = resp.data.data.size
              this.page.total = resp.data.data.total
              this.page.current = resp.data.data.current
              this.page.pages = resp.data.data.pages
            })
          },
        findPage(pagenow) {
          this.page.current = pagenow
          this.pageGetData(pagenow, 5)
        },

      },
      created() {
          this.searchName = this.$route.params.name
         // 首次加载5条数据
        this.pageGetData(1,5);
      }
    }
</script>

<style scoped>

  .article-title{
    font-size: 17px;
    font-weight: 800;
    color: #111111;
  }
  .article-class{
    font-size: 14px;
  }
</style>
